<template>
  <div id="warn-chart">
    <h2>
      报警车辆信息统计
    </h2>
    <div class="box">
      <span class="icon top-left-icon"></span>
      <span class="icon top-right-icon"></span>
      <span class="icon bottom-left-icon"></span>
      <span class="icon bottom-right-icon"></span>
      <ul>
        <li v-for="(item, index) in warnList" :style="{width:parseInt(item.stylePercent)+'%'}" :key="index">
          <span class="percent" :style="{color:item.color}">{{item.percent}}%</span>
          <span class="bar" :style="{background:item.style}"></span>
          <span class="name">{{item.type}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'

  export default {
    name: 'WarnChart',
    computed: {
      ...mapGetters({
        companyInfo: "company_info",
        homeState: "home_state",
        warnData: "homeChart/warnArr",
        formatHistoryTime: "homeChart/selectedTime"
      }),

      warnList: function() {
        const p = parseInt(this.warnData[0] / (this.warnData[0] + this.warnData[1]) * 100);
        if (isNaN(p)) {
          return [{
            type: "超速",
            percent: 0,
            style:'linear-gradient(to right, #2ba4bc, #37ebba)',
            color:'#05d6c9',
            stylePercent: 50
          }, {
            type: "疲劳驾驶",
            percent: 0,
            style:'linear-gradient(to right, #e15b53, #c0af7e)',
            color:'#ff4c41',
            stylePercent: 50
          }]

        }
        let stylePercentCS = p;
        let stylePercentPL = 100 - p;

        if (p < 10) {
          stylePercentCS = 10;
          stylePercentPL = 90;
        } else if (p > 85) {
          stylePercentCS = 85;
          stylePercentPL = 15;
        }

        return [{
          type: "超速",
          percent: p,
          style:'linear-gradient(to right, #2ba4bc, #37ebba)',
          color:'#05d6c9',
          stylePercent: stylePercentCS
        }, {
          type: "疲劳驾驶",
          percent: (100 - p),
          style:'linear-gradient(to right, #e15b53, #c0af7e)',
          color:'#ff4c41',
          stylePercent: stylePercentPL
        }]
      }
    },
    mounted(){
      this.getData();
    },
    methods: {
      getData: function() {
        this.$store.dispatch("homeChart/requsetWarnArr", {
          date: this.homeState !== "history_hotMap" ? 0 : this.formatHistoryTime,
          companyId: this.homeState !== "company_group" ? 0 : this.companyInfo.id
        });
      }
    },
    watch: {
      homeState: function() {
        this.getData();
      },
      formatHistoryTime: function() {
        this.getData();
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../static/common/common.scss";
  #warn-chart {
    width: 100%;
    height: 150px;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 10px;
    h2{
      @include linearTitle;
    }
    .box{
      position: relative;
      height: calc(100% - 34px);
      @include borderBlur;
      .icon{
        position: absolute;
        z-index: 10;
        width: 14px;
        height: 14px;
        &.top-left-icon{
          top: -2px;
          left: -2px;
          background: url("../../../static/images/index/top-left.png") no-repeat left top;
        }
        &.top-right-icon{
          top: -2px;
          right: -2px;
          background: url("../../../static/images/index/top-right.png") no-repeat right top;
        }
        &.bottom-left-icon{
          bottom: -2px;
          left: -2px;
          background: url("../../../static/images/index/left-bottom.png") no-repeat left bottom;
        }
        &.bottom-right-icon{
          bottom: -2px;
          right: -2px;
          background: url("../../../static/images/index/right-bottom.png") no-repeat right bottom;
        }
      }
      ul{
        list-style: none;
        margin: 0;
        height: 100%;
        padding: 10px 15px;
        box-sizing: border-box;
        li{
          display: inline-block;
          vertical-align: middle;
          span{
            display: block;
            text-align: center;
            &.percent{
              font-family: 'ds-digitalbold-webfont';
              font-size: $font-title;
            }
            &.bar{
              height: 24px;
              width: 100%;
              border: 2px solid #2e4e5d;
              box-sizing: border-box;
            }
            &.name{
              line-height: 30px;
              font-size: $list-font;
            }
          }
          &:last-child{
            span.bar{
              border-left: none;
              border-top-right-radius: 2px;
              border-bottom-right-radius: 2px;
            }
          }
          &:first-child{
            span.bar{
              border-top-left-radius: 2px;
              border-bottom-left-radius: 2px;
            }
          }
        }
      }
    }
  }
</style>
